<template>
    <div class="ent">
        <!--顶部-->
        <div class="header">
            <p style="display: flex;justify-content: space-between"><span @click="goHome"><i class="el-icon-close"></i></span>
                <!--验证方式切换-->
                <span
                    style="font-size: 14px;" v-if="shows" @click="shows = !shows">密码登录</span>
                <span
                        style="font-size: 14px;" v-else @click="shows = !shows">验证码登录</span>
            </p>
            <p style="width: 175px;margin: 0 auto;margin-top: 25px;height: 100px;overflow: hidden"><img
                    src="../../assets/好东西.jpg" alt="" style="width: 100%;"></p>
        </div>
        <div class="cc">
            <div class="li">
                <input type="text" style="border: none;outline: none;width:100%;" v-model="value1"
                       placeholder="请输入手机号" v-if="shows">
                <input type="text" style="border: none;outline: none;width:100%;" v-model="value1"
                       placeholder="请输入用户名" v-else>
            </div>
            <div class="li">
                <input type="text" style="border: none;outline: none;width:100%;" v-model="value2"
                       placeholder="请输入图片验证码" v-if="shows">
                <input type="text" style="border: none;outline: none;width:100%;" v-model="value2"
                       placeholder="请输入密码" v-else>
                <p style="margin-left: 5px;" v-if="shows"><img
                        :src="'https://api.javamall.com.cn/base/captchas/uGMytogGylPIccvHf2uH/LOGIN?r='+codes"
                        alt=""
                        @click="code" style="width: 60px;
    height: 30px;"></p>
            </div>
            <div class="li">
                <input type="text" style="border: none;outline: none;width:100%;" v-model="value3"
                       placeholder="请输入短信验证码" v-if="shows">
                <input type="text" style="border: none;outline: none;width:100%;" v-model="value3"
                       placeholder="请输入图片验证码" v-else>
                <button @click="again" style="margin-left: 5px;
    color: #c0c4cc;
    font-size: 11px;
    padding-top: 1px;width: 32%;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;color: #fff;
    border:none;    border-radius: 5px;
    border-color: #fa3534;
    background-color: #fa3534;" v-if="shows">获取验证码
                </button>
                <p style="margin-left: 5px;" v-else><img
                        :src="'https://api.javamall.com.cn/base/captchas/uGMytogGylPIccvHf2uH/LOGIN?r='+codes"
                        alt=""
                        @click="code" style="width: 60px;
    height: 30px;"></p>
            </div>
            <p @click="goLogin" style="text-align: right;margin-top: 5px;font-size: 12px;color: #82848a;" v-if="shows">手机注册?</p>
            <p @click="goRes" style="text-align: right;margin-top: 5px;font-size: 12px;color: #82848a;" v-else>忘记密码?</p>
            <van-button round type="danger" style="opacity:.5;width: 100%;margin: 10px 0">登录</van-button>
            <p style="font-size: 11px;display: flex;margin: 5px 0" v-if="shows">
                <van-checkbox v-model="checked" shape="square" checked-color="#ee0a24" icon-size="12px"></van-checkbox>
                <span style="margin-left: 20px">我已阅读并同意</span><span style="color:#ee0a24;" @click="show=true">《Javashop多店铺示例商城隐私政策》</span>
            </p>
        </div>
        <div style="margin-top: 50px;">
            <p style="text-align: center;font-size: 14px;"><span style="width: 75px;border-bottom: 1px solid;
    border-color: rgb(220, 223, 230);height: 1px;line-height: 9px;display: inline-block;vertical-align: middle;"></span><span style="margin: 0 5px;color: rgb(144, 147, 153);">其它登录方式</span><span style="border-bottom: 1px solid;width: 75px;
    border-color: rgb(220, 223, 230);height: 1px;line-height: 9px;display: inline-block;vertical-align: middle;"></span></p>
            <p style="text-align: center"><img src="../../assets/QQ.png" alt="" style="margin: 10px;width: 40px;"><img src="../../assets/支付宝.png" alt="" style="margin: 10px;width: 40px;"></p>
        </div>
        <van-action-sheet v-model="show" title="用户注册协议">
            <div v-html="xy" style="padding: 0 15px 10px 15px;
    box-sizing: border-box;font-size: 14px;"></div>
        </van-action-sheet>
    </div>
</template>

<script>
    import jsp from '../../Api/Api'

    export default {
        name: "Enter",
        data() {
            return {
                value1: '',
                value2: '',
                value3: '',
                codes: 0,
                xy: '',
                show: false,
                checked: true,
                shows:true,
            }
        },
        created() {
            jsp.paction().then(data => {
                // console.log(data.data)
                this.xy = data.data.content
            }).catch(er => console.log(er))
        },
        methods: {
            code() {
                // //生成uuid
                // this.id = uuidv1()
                // console.log(this.id)
                let a = Math.floor(Math.random() * 100)
                this.codes = a + a
            },
            again() {
                this.code()
            },
            goHome(){
                this.$router.push('/mine')
            },
            goLogin() {
                this.$router.push('/login')
            },
            goRes(){
                this.$router.push('/res')
            }
        },
    }
</script>

<style scoped>
    body{
        background-color: #ffffff;
    }
    .header {
        background-image: url("../../assets/bg3.png");
        background-size: 100% 100%;
        color: #fff;
        padding: 15px;
        height: 230px;
        padding-top: 5px;
    }

    .cc {
        background-color: #fff;
        margin: -70px 15px 15px 15px;
        border-radius: 10px;
        padding: 10px 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        /*padding-top: 0;*/
    }

    .li {
        padding: 10px 0;
        font-size: 14px;
        color: #303133;
        box-sizing: border-box;
        line-height: 35px;
        border: 0 solid #e4e7ed;
        border-bottom-width: 1px;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
    }
</style>